How do JavaScript closures work?

Question

Aryan Kumar · Answer

Closures in JavaScript are a powerful and sometimes subtle feature that allows functions to "remember" the scope in which they were created, even if that scope is no longer active. Understanding closures is fundamental to mastering JavaScript.
Here's a basic explanation of how closures work:
1. Function Scope:
In JavaScript, variables declared inside a function are local to that function. They are only accessible within the function and are not visible outside of it.
function outerFunction() {
    let outerVar = 'I am from outerFunction';
    function innerFunction() {
        console.log(outerVar);  // innerFunction has access to outerVar
    }
    innerFunction();
}
outerFunction();
2. Closure:
A closure is created when a function is defined inside another function (nested function), and the inner function has access to the outer function's variables. The inner function forms a closure, "closing over" the variables it needs.
function outerFunction() {
    let outerVar = 'I am from outerFunction';
    function innerFunction() {
        console.log(outerVar);  // innerFunction forms a closure over outerVar
    }
    return innerFunction;
}
let closureFunc = outerFunction();
closureFunc();  // This will still log 'I am from outerFunction'
3. Retaining State:
Closures can be used to create functions that "remember" the state of their surrounding scope, even after that scope has finished executing.
function counter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}
let increment = counter();
increment();  // Outputs 1
increment();  // Outputs 2
In this example, the inner function (increment) forms a closure over the
count variable. The count variable is retained between calls to
increment, and each call increments its value.
4. Data Encapsulation:
Closures are often used to achieve data encapsulation, allowing you to create private variables and methods.
function createPerson(name) {
    let age = 0;
    function growOlder() {
        age++;
        console.log(`${name} is now ${age} years old.`);
    }
    return growOlder;
}
let person = createPerson('John');
person();  // Outputs "John is now 1 year old."
person();  // Outputs "John is now 2 years old."
In this case, the growOlder function has access to the 
age variable even though it's not directly accessible from the outside.
Understanding closures is crucial for more advanced JavaScript programming and helps in creating modular and maintainable code. They play a significant role in various JavaScript patterns and libraries.

forum

How do JavaScript closures work?

Revati S Misra

Can you answer this question?

1 Answers

1. Function Scope:

2. Closure:

3. Retaining State:

4. Data Encapsulation:

Liked By